<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园答疑助手 - 问题详情</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4361ee',
            secondary: '#3f37c9',
            accent: '#4895ef',
            success: '#4cc9f0',
            warning: '#f72585',
            teacher: '#7209b7'
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .nav-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      }
      .reply-card {
        @apply bg-white rounded-xl p-4 border border-gray-100 transition-all duration-300;
      }
      .teacher-tag {
        @apply absolute -top-1 -right-1 bg-teacher text-white text-xs px-1.5 py-0.5 rounded;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <nav class="bg-white nav-shadow sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <button class="text-gray-500 hover:text-primary transition-colors">
        <i class="fa fa-arrow-left text-lg"></i>
      </button>
      <h1 class="text-lg font-bold text-dark">问题详情</h1>
      <div class="flex items-center gap-3">
        <button class="text-gray-500 hover:text-primary transition-colors">
          <i class="fa fa-star-o text-lg"></i>
        </button>
        <button class="text-gray-500 hover:text-primary transition-colors">
          <i class="fa fa-share-alt text-lg"></i>
        </button>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6">
    <!-- 问题卡片 -->
    <div class="bg-white rounded-xl p-6 mb-6 border border-gray-100 shadow-sm">
      <div class="flex items-start justify-between">
        <div class="flex items-center gap-3">
          <img src="https://picsum.photos/id/237/200" alt="用户头像" class="w-10 h-10 rounded-full">
          <div>
            <div class="flex items-center">
              <h3 class="font-medium text-dark">李同学</h3>
              <span class="ml-2 text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">匿名提问</span>
            </div>
            <p class="text-xs text-gray-500">2小时前 · 高等数学（上）</p>
          </div>
        </div>
        <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">未解决</span>
      </div>
      
      <div class="mt-4">
        <h2 class="text-lg font-medium text-dark">关于洛必达法则的应用条件，这里为什么不能直接使用？</h2>
        <p class="text-gray-600 mt-3">
          这道题是求极限的题目，当x趋近于0时，分子分母都是0，我用了洛必达法则计算，但结果和标准答案不一样，想知道哪里出错了？<br><br>
          我的计算步骤：<br>
          1. 原式为0/0型，应用洛必达法则<br>
          2. 分子分母分别求导后得到xxx<br>
          3. 再次代入x=0，得到结果为1<br>
          但标准答案是2，不知道哪里有问题？
        </p>
        <div class="mt-4 flex gap-3">
          <img src="https://picsum.photos/id/180/400" alt="问题图片" class="w-1/2 rounded-lg object-cover border border-gray-100">
        </div>
        <div class="mt-4 flex flex-wrap gap-2">
          <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">洛必达法则</span>
          <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">极限计算</span>
          <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">高数上册</span>
        </div>
      </div>
    </div>

    <!-- 回复区标题 -->
    <div class="flex items-center justify-between mb-4">
      <h3 class="font-bold text-dark flex items-center">
        <i class="fa fa-comment-o text-primary mr-2"></i>
        3条回复
      </h3>
      <div class="text-sm text-gray-500">
        有帮助的回复可标记为最佳答案
      </div>
    </div>

    <!-- 回复列表 -->
    <div class="space-y-4 mb-8">
      <!-- 教师回复 -->
      <div class="reply-card">
        <div class="flex items-start">
          <div class="relative">
            <img src="https://picsum.photos/id/1005/200" alt="教师头像" class="w-10 h-10 rounded-full">
            <span class="teacher-tag">教师</span>
          </div>
          <div class="ml-3 flex-1">
            <div class="flex items-center justify-between">
              <div>
                <h4 class="font-medium text-dark">张教授</h4>
                <p class="text-xs text-gray-500">1小时前</p>
              </div>
              <button class="text-xs text-primary hover:text-secondary">
                设为最佳答案
              </button>
            </div>
            <div class="mt-2 text-gray-600">
              <p>洛必达法则的应用需要满足三个条件，你可能忽略了第三个条件：</p>
              <ol class="list-decimal ml-5 mt-2 space-y-1">
                <li>当x→a时，f(x)和g(x)都趋于0或都趋于无穷大；</li>
                <li>在点a的某去心邻域内，f'(x)和g'(x)都存在且g'(x)≠0；</li>
                <li>lim[f'(x)/g'(x)]存在或为无穷大。</li>
              </ol>
              <p class="mt-2">你这道题在第二次求导后其实不满足第三个条件，所以不能继续使用洛必达法则，应该改用等价无穷小替换。</p>
            </div>
            <div class="mt-3 flex items-center gap-4">
              <button class="text-gray-500 hover:text-primary text-sm flex items-center">
                <i class="fa fa-thumbs-o-up mr-1"></i> 12
              </button>
              <button class="text-gray-500 hover:text-primary text-sm flex items-center">
                <i class="fa fa-reply mr-1"></i> 回复
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 学生回复1 -->
      <div class="reply-card">
        <div class="flex items-start">
          <img src="https://picsum.photos/id/1025/200" alt="学生头像" class="w-10 h-10 rounded-full">
          <div class="ml-3 flex-1">
            <div class="flex items-center justify-between">
              <div>
                <h4 class="font-medium text-dark">陈同学</h4>
                <p class="text-xs text-gray-500">40分钟前</p>
              </div>
              <button class="text-xs text-primary hover:text-secondary">
                设为最佳答案
              </button>
            </div>
            <div class="mt-2 text-gray-600">
              <p>我之前也犯过类似的错误！这道题应该先用等价无穷小替换sinx≈x，然后再用洛必达法则，步骤会简单很多，你可以试试～</p>
            </div>
            <div class="mt-3 flex items-center gap-4">
              <button class="text-gray-500 hover:text-primary text-sm flex items-center">
                <i class="fa fa-thumbs-o-up mr-1"></i> 5
              </button>
              <button class="text-gray-500 hover:text-primary text-sm flex items-center">
                <i class="fa fa-reply mr-1"></i> 回复
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 提问者回复 -->
      <div class="reply-card bg-primary/5 border-primary/10">
        <div class="flex items-start">
          <img src="https://picsum.photos/id/237/200" alt="用户头像" class="w-10 h-10 rounded-full">
          <div class="ml-3 flex-1">
            <div class="flex items-center">
              <h4 class="font-medium text-dark">李同学（提问者）</h4>
              <p class="text-xs text-gray-500 ml-2">20分钟前</p>
            </div>
            <div class="mt-2 text-gray-600">
              <p>谢谢张教授和陈同学！我明白了，确实是忽略了洛必达法则的应用条件，我再重新计算一遍试试～</p>
            </div>
            <div class="mt-3 flex items-center gap-4">
              <button class="text-gray-500 hover:text-primary text-sm flex items-center">
                <i class="fa fa-thumbs-o-up mr-1"></i> 2
              </button>
              <button class="text-gray-500 hover:text-primary text-sm flex items-center">
                <i class="fa fa-reply mr-1"></i> 回复
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 回复输入框 -->
    <div class="bg-white rounded-xl p-4 border border-gray-100 shadow-sm fixed bottom-0 left-0 right-0 max-w-5xl mx-auto w-full">
      <textarea placeholder="写下你的解答或思路..." rows="3" 
        class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus transition-all resize-none mb-3"></textarea>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <button class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-image"></i>
          </button>
          <button class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-calculator"></i>
          </button>
          <button class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-paperclip"></i>
          </button>
        </div>
        <button class="px-6 py-2 bg-primary hover:bg-secondary text-white rounded-lg text-sm font-medium transition-all">
          发表回复
        </button>
      </div>
    </div>
  </main>
</body>
</html>